<template>
  <div class="infinite-container" >
     <div class="login">
      <mu-divider></mu-divider>
      <mu-row class="bgwhite content-pb4">
        <mu-col width="10" tablet="10" class="login-icon">
         <i class="iconfont icon-shouji"></i>
        </mu-col>
        <mu-col width="90" tablet="90">
         <mu-text-field hintText="请输入手机号" v-model="phoneNumber" type="number" fullWidth></mu-text-field>
          <i class="iconfont icon-X" v-show="phoneNumber.length > 0" @click="phoneNumber = ''"></i>
          <mu-divider></mu-divider>
        </mu-col>
      </mu-row>
      <mu-row class="bgwhite content-pb4">
        <mu-col width="10"  tablet="10" class="login-icon">
          <i class="iconfont icon-message01"></i>
        </mu-col>
        <mu-col width="50" tablet="50">
           <mu-text-field hintText="验证码" v-model="vcode" type="text"  fullWidth></mu-text-field>
        </mu-col>
        <mu-col width="40" class="vcode-border" tablet="40">
          <mu-flat-button :label="vcodeLabel" @click="getVcode" class="vcode" :disabled="vcodeDisabled"></mu-flat-button>
        </mu-col>
        <mu-divider></mu-divider>
      </mu-row>
      <mu-row class="bgwhite content-pb4">
        <mu-col width="10" tablet="10" class="login-icon">
         <i class="iconfont icon-suo"></i>
        </mu-col>
        <mu-col width="90" tablet="90">
          <mu-text-field hintText="6-20位数字或字母密码" ref="password" v-model="password" :type="passwordType"  fullWidth></mu-text-field>
          <i :class="['iconfont','t3', 'icon-eye1_'+eye]" @click="eyeClick" v-show="password.length > 0"></i>
          <mu-divider></mu-divider>
        </mu-col>
        <mu-col width="10" tablet="10" class="login-icon">
         <i class="iconfont icon-suo"></i>
        </mu-col>
        <mu-col width="90" tablet="90">
           <mu-text-field hintText="请确认密码" ref="password" v-model="confirmPassword" :type="passwordType2"  fullWidth></mu-text-field>
          <i :class="['iconfont','t3', 'icon-eye1_'+eye2]" @click="eye2Click" v-show="confirmPassword.length > 0"></i>
          <mu-divider></mu-divider>
        </mu-col>
      </mu-row>
      <mu-divider></mu-divider>
      <div class="pd20">
        <mu-raised-button label="注册"  @click="login" fullWidth primary class="btn-login" v-show="!loginDisabled">
        </mu-raised-button>
        <mu-raised-button label="注册" fullWidth primary class="btn-login disabled" v-show="loginDisabled">
        </mu-raised-button>
        <div class="register-text">
          <p>点击上方“注册”按钮，即表示同意</p>
          <div><router-link to="/lisence">《江苏省中医院注册协议》</router-link></div>
        </div>
      </div>
  
    </div>
  </div>
</template>
<script>
import {commonAjax, TENANT_ID, ROLE_ID, PLATFORM_PREFIX} from '../api/api'
import {testPhone, testVcode, testEmpty} from '../common/js/util'
import md5 from 'md5'

const VCODE_LABEL_DEFALT = '获取验证码'

export default {
  data () {
    return {
      phoneNumber: '',
      vcode: '',
      password: '',
      confirmPassword: '',
      passwordType: 'password',
      passwordType2: 'password',
      eye: 'close',
      eye2: 'close',
      vcodeDisabled: false,
      vcodeLabel: VCODE_LABEL_DEFALT,
      serviceMethod: 'registerSmsCode',
      roleId: ROLE_ID
    }
  },
  computed: {
    loginDisabled () {
      return !(testPhone(this.phoneNumber) && testVcode(this.vcode) && !testEmpty(this.password) && !testEmpty(this.confirmPassword))
    }
  },
  methods: {
    getVcode () {
      if (testPhone(this.phoneNumber)) {
        this.vcodeDisabled = true
        commonAjax([TENANT_ID, this.phoneNumber, this.roleId], `${PLATFORM_PREFIX}.registerService`, this.serviceMethod).then(res => {
          if (res.data.code === 200) {
            this.$store.commit('UPDATE_TOAST', {message: '成功发送短信'})
            this.timeout()
          } else if (res.data.code === 603) {
            this.vcodeDisabled = false
            this.$store.commit('UPDATE_TOAST', {message: res.data.msg})
          } else {
            this.$store.commit('UPDATE_TOAST', {message: res.data.msg})
          }
        })
      } else {
        this.$store.commit('UPDATE_TOAST', {message: '请输入有效的手机号'})
      }
    },
    timeout () {
      let start = 60
      let countDown = () => {
        this.vcodeTimer = setTimeout(() => {
          this.vcodeLabel = (start--) + 's'
          countDown()
          if (start <= 0) {
            this.vcodeDisabled = false
            this.vcodeLabel = VCODE_LABEL_DEFALT
            clearTimeout(this.vcodeTimer)
          }
        }, 1000)
      }
      countDown()
    },
    eyeClick (e) {
      if (this.eye === 'open') {
        this.eye = 'close'
        this.passwordType = 'password'
      } else {
        this.eye = 'open'
        this.passwordType = 'text'
      }
    },
    eye2Click (e) {
      if (this.eye2 === 'open') {
        this.eye2 = 'close'
        this.passwordType2 = 'password'
      } else {
        this.eye2 = 'open'
        this.passwordType2 = 'text'
      }
    },
    login () {
      if (this.password !== this.confirmPassword) {
        this.$store.commit('UPDATE_TOAST', {message: '两次输入的密码不一致'})
        return
      }
      if (this.password.length < 6 || this.password.length > 20) {
        this.$store.commit('UPDATE_TOAST', {message: '密码长度为6-20位'})
        return
      }
      if (this.confirmPassword.length < 6 || this.confirmPassword.length > 20) {
        this.$store.commit('UPDATE_TOAST', {message: '密码长度为6-20位'})
        return
      }
      localStorage.phoneNumber = this.phoneNumber
      let params = [TENANT_ID, this.phoneNumber, md5(this.password), this.vcode]
      this.$store.commit('UPDATE_LOADING')
      commonAjax(params, `${PLATFORM_PREFIX}.registerService`, 'registerPatient').then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code !== 200) {
          this.$store.commit('UPDATE_TOAST', {message: `[${this.vcode}]验证码错误`})
          return
        }
        // 注册后登陆获取userId
        // 注册成功
        this.$store.commit('UPDATE_TOAST', {
          message: '注册成功，请登录',
          fn: () => {
            this.$router.push('/login')
          }
        })
      }).catch(err => {
        console.warn(err)
      })
    }
  },
  mounted () {
    let roleName = this.$route.query.role
    let loginHeader = '注册'
    if (roleName === 'doctor') {
      this.roleId = roleName
      this.serviceMethod = 'registerSmsCodeDoc'
      loginHeader = '医生版-注册'
    }
    this.$store.commit('UPDATE_TITLE', loginHeader)
  },
  beforeDestroy () {
    this.$store.commit('UPDATE_TITLE')
  }
}
</script>

<style lang="less">
@import '../common/css/vars.less';
.register-text {
  text-align: center;
  color: @text-hint;
  p {
    margin-bottom: 4px;
  }
}
</style>
